<template>
  <div class="action-items-wrapper">
    <span
      v-if="
        getLayoutState.actionItem.showSearch &&
        getLayoutState.device !== 'mobile'
      "
      class="iconfont action-item"
      @click="onShowSearch"
      >&#xe62c;</span
    >

    <el-popover
      placement="bottom"
      class="action-item"
      trigger="click"
      @after-enter="onPopoverAfterEnter"
    >
      <template v-slot:reference>
        <el-badge v-if="getLayoutState.actionItem.showMessage" :value="12">
          <span class="iconfont action-item">&#xe646;</span>
        </el-badge>
      </template>
      <template v-slot:default>
        <ly-message-content ref="messageContent" @clear-num="clearNum" />
      </template>
    </el-popover>

    <span
      v-if="getLayoutState.actionItem.showRefresh"
      class="iconfont action-item"
      @click="onRefrehRoute"
      >&#xe6a8;</span
    >
    <span
      v-if="
        getLayoutState.actionItem.showFullScreen &&
        getLayoutState.device !== 'mobile'
      "
      class="iconfont action-item"
      @click="onScreenFull"
      >&#xe655;</span
    >
    <div
      v-if="
        getLayoutState.actionItem.showSearch &&
        getLayoutState.device !== 'mobile'
      "
      class="input-wrapper"
      :class="{ 'is-active': showSearchContent }"
    >
      <el-input
        ref="searchContent"
        v-model="searchContent"
        placeholder="请输入内容"
        clearable
        @change="onChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { ElInput } from "element-ui/types/input";
import LyMessageContent from "@/layouts/components/message/LyMessageContent.vue";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";
// import screenfull from "screenfull";
// import screenfull from "screenfull";

@Component({
  name: "LyActionItems",
  components: { LyMessageContent },
})
export default class LyActionItems extends Vue {
  //#region vue prop =================================

  //#endregion

  //#region vue data =================================
  showSearchContent: boolean = false;
  searchContent: string = "";
  nums: number = 3;

  //#endregion
  //#region computed getter =================================

  //#endregion
  //#region vue life =================================
  created() {
    console.log("LyActionItems " + "created");
  }

  mounted() {
    console.log("LyActionItems " + "mounted");
  }

  beforeDestroy() {
    console.log("LyActionItems " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================
  get getLayoutState() {
    return LayoutStoreModule;
  }
  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private onShowSearch() {
    this.showSearchContent = !this.showSearchContent;
    this.searchContent = "";
    if (this.$refs.searchContent) {
      if (this.showSearchContent) {
        (this.$refs.searchContent as ElInput).focus();
      } else {
        (this.$refs.searchContent as ElInput).blur();
      }
    }
  }
  onChange(content: any) {
    if (!content) {
      return;
    }
    window.open("https://www.baidu.com/s?wd=" + content);
  }
  onScreenFull() {
    // if (!screenfull.isEnabled) {
    //   this.$errorMsg && this.$errorMsg!("当前浏览器不支持全屏操作");
    //   return false;
    // }
    // screenfull.toggle();
    // screenfull.isEnabled;
  }
  onRefrehRoute() {
    this.$router.replace({ path: "/redirect" + this.$route.path });
  }
  //popupview 显示动画播放完毕后触发
  onPopoverAfterEnter() {
    if (this.$refs.messageContent) {
      (this.$refs.messageContent as LyMessageContent).update();
    }
  }
  clearNum(num: number) {
    this.nums = Math.max(0, this.nums - num);
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>

<style lang="scss" scoped>
.action-items-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  color: currentColor;
  z-index: 1;
  .action-item {
    min-width: 40px;
  }
  .input-wrapper {
    position: absolute;
    top: 6px;
    bottom: 3px;
    left: 0;
    width: 0;
    z-index: -1;
    transform: translateX(0);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    &.is-active {
      width: 100%;
      transform: translateX(-100%);
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
  }
}
::v-deep {
  .el-input {
    border: none;
    border-bottom: 1px solid currentColor;
  }
  .el-input__inner {
    border: none !important;
    height: 35px;
    line-height: 35px;
    color: currentColor !important;
    background-color: transparent !important;
  }
}
</style>
